<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index/home' }"
                >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
                ><a href="/index/setMeal">套餐管理</a></el-breadcrumb-item
            >
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-input
            class="el-input__inner"
            v-model="input"
            placeholder="请输入内容"
        ></el-input>
        <el-button type="primary">搜索</el-button>
        <el-button
            icon="el-icon-circle-plus-outline"
            type="primary"
            @click="add"
            >添加
        </el-button>
        <el-table :data="mealsData" style="width: 100%">
            <el-table-column
                class="table_head"
                label="套餐编号"
                prop="_id"
                align="center"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                label="名称"
                prop="name"
                align="center"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                label="价格"
                prop="normalPrice"
                align="center"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                label="打折价格"
                prop="salePrice"
                align="center"
            >
            </el-table-column>
            <el-table-column class="table_head" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                        icon="el-icon-edit"
                        size="mini"
                        type="primary"
                        @click="update(scope.row)"
                        >修改</el-button
                    >
                    <el-button
                        icon="el-icon-delete"
                        size="mini"
                        type="danger"
                        @click="del(scope.row._id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
                :current-page.sync="currentPage2"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="prev, pager, next,sizes"
                :total="mealsData.length"
            >
            </el-pagination>
        </div>
        <el-dialog title="添加" :visible.sync="addShow" width="500px">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="form.normalPrice"></el-input>
                </el-form-item>
                <el-form-item label="打折价格">
                    <el-input v-model="form.salePrice"></el-input>
                </el-form-item>
                <el-form-item label="套餐时间">
                    <el-input v-model="form.mouth"></el-input>
                </el-form-item>
                <el-form-item label="套餐类型">
                    <el-input v-model="form.type"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addShow = false">取 消</el-button>
                <el-button type="primary" @click="addBtn">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改" :visible.sync="updateShow" width="500px">
            <el-form ref="form" :model="updateForm" label-width="80px">
                 <el-form-item label="名称">
                    <el-input v-model="updateForm.name"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="updateForm.normalPrice"></el-input>
                </el-form-item>
                <el-form-item label="打折价格">
                    <el-input v-model="updateForm.salePrice"></el-input>
                </el-form-item>
                <el-form-item label="套餐时间">
                    <el-input v-model="updateForm.mouth"></el-input>
                </el-form-item>
                <el-form-item label="套餐类型">
                    <el-input v-model="updateForm.type"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateShow = false">取 消</el-button>
                <el-button type="primary" @click="updateBtn">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            addShow: false,
            updateShow: false,
            input: "",
            currentPage2: 3,
            mealsData: [],
            form: {},
            updateForm: {},
        };
    },
    methods: {
        async getAllMeal() {
            const result = await this.$api.meals.getAllMeal();
            if (result.meta.status == 200) {
                this.mealsData = result.data;
                console.log(result.data);
            }
        },
        add() {
            this.addShow = true;
        },
        async addBtn() {
            const result = await this.$api.meals.add(this.form);
            if (result.meta.status == 200) {
                this.$message({
                    message: result.meta.msg,
                    type: "success",
                });
                this.getAllMeal();
                this.addShow = false;
                this.form = {};
            } else {
                this.$message({
                    message: result.meta.error,
                    type: "error",
                });
            }
        },
        update(item) {
            this.updateShow = true;
            this.updateForm = { ...item };
        },
        async updateBtn() {
            const result = await this.$api.meals.update(this.updateForm);
            // console.log(result);
            if (result.meta.status == 200) {
                this.$message({
                    message: result.meta.msg,
                    type: "success",
                });
                this.getAllMeal();
                this.updateShow = false;
                this.form = {};
            } else {
                this.$message({
                    message: result.meta.error,
                    type: "error",
                });
            }
        },
        async del(_id) {
            const result = await this.$api.meals.del({ _id });
            if (result.meta.status == 200) {
                this.$message({
                    message: result.meta.msg,
                    type: "success",
                });
                this.getAllMeal();
                this.show = false;
                this.form = {};
            } else {
                this.$message({
                    message: result.meta.error,
                    type: "error",
                });
            }
        },
    },
    created() {
        this.getAllMeal();
    },
};
</script>

<style scoped>
.el-input__inner >>> {
    width: 277px;
    padding: 0;
    margin-bottom: 20px;
}
.table_head {
    background-color: rgb(250, 250, 250);
}
.box-card {
    width: 400px;
    display: block;
    height: 450px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.bigBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
}
.el-table::before >>> {
    height: 0px !important;
}
.el-select {
    width: 100%;
}
.page {
    display: flex;
    justify-content: flex-end;
}
</style>